<template>
  <view class="news-page">
    <!-- 原有列表页结构 -->
    <TopNav></TopNav>

    <!-- 选项卡导航 -->
    <view class="tab">
      <view class="tab_title">
        <scroll-view scroll-x="true" class="scroll_x">
          <view class="tab-item" @click="switchTab(0)">
            <image 
              style="width: 30rpx; height: 35rpx; vertical-align: middle; margin-right: 8rpx;" 
              src="/static/shouhu.png"
            ></image>
            守护
          </view>
          <view class="tab-item" @click="switchTab(1)">要闻</view>
          <view class="tab-item" @click="switchTab(2)">推荐</view>
          <view class="tab-item" @click="switchTab(3)">关注流</view>
          <view class="tab-item" @click="switchTab(4)">24小时</view>
          <view class="tab-item" @click="switchTab(5)">娱乐</view>
          <view class="tab-item" @click="switchTab(6)">桂林</view>
          <view class="tab-item" @click="switchTab(7)">财经</view>
          <view class="tab-item" @click="switchTab(8)">生活</view>
          <view class="tab-item" @click="switchTab(9)">科技</view>
          <view class="tab-item" @click="switchTab(10)">军事</view>
          <view class="tab-item" @click="switchTab(11)">体育</view>
          <view class="tab-item" @click="switchTab(12)">汽修</view>
          <view class="tab-item" @click="switchTab(13)">健康</view>
          <view class="tab-item" @click="switchTab(14)">国际</view>
          <view class="tab-item" @click="switchTab(15)">千里眼</view>
          <view class="tab-item" @click="switchTab(16)">5G</view>
        </scroll-view>
      </view>
    </view>

    <!-- 顶部信息区 -->
    <view class="top-info">
      <view class="update-notice">
        <view class="three-s">为您更新了15条内容</view>
      </view>
      <view class="header-bar">
        <view class="weather-info">4℃~9℃ 星期三 泉州 11.12</view>
        <view class="search-container">
          <input 
            type="text" 
            class="search_input" 
            placeholder="搜索关键词"
            placeholder-style="color: #fff;"
            v-model="searchKey"
            @input="filterNews"
          ></input>
        </view>
      </view>
    </view>

    <!-- 新增：新闻详情弹窗 -->
    <view class="detail-modal" v-if="showDetail">
      <scroll-view class="detail-scroll" scroll-y="true">
        <!-- 1. 新闻标题+作者信息+关注 -->
        <view class="detail-header">
          <view class="detail-title">{{ currentNews.title }}</view>
          <view class="author-area">
            <image 
              class="author-avatar" 
              :src="currentNews.authorAvatar || '/static/avatar-default.png'"
            ></image>
            <view class="author-info">
              <view class="author-name">{{ currentNews.author || '匿名作者' }}</view>
              <view class="author-meta">
                <view class="source">{{ currentNews.source }}</view>
                <view class="publish-time">{{ currentNews.publishTime || '刚刚' }}</view>
              </view>
            </view>
            <button 
              class="follow-btn" 
              :class="{ followed: currentNews.isFollowed }"
              @click="toggleFollow"
            >
              {{ currentNews.isFollowed ? '已关注' : '+关注' }}
            </button>
          </view>
        </view>

        <!-- 2. 新闻内容 -->
        <view class="detail-content">
          <view class="content-text" v-html="currentNews.content || '暂无详细内容'"></view>
          <!-- 新闻配图 -->
          <view class="content-imgs" v-if="currentNews.imageUrls || currentNews.imageUrl">
            <image 
              class="content-img" 
              v-for="(img, idx) in (currentNews.imageUrls || [currentNews.imageUrl])" 
              :key="idx"
              :src="img || '/static/default-img.png'"
              mode="widthFix"
              @click="previewImage(currentNews.imageUrls || [currentNews.imageUrl], idx)"
            ></image>
          </view>
        </view>

        <!-- 3. 精彩推荐 -->
        <view class="recommend-section">
          <view class="section-title">精彩推荐</view>
          <view class="recommend-list">
            <view 
              class="recommend-item" 
              v-for="(item, idx) in recommendList" 
              :key="idx"
              @click="switchNews(item)"
            >
              <image 
                class="recommend-img" 
                :src="item.imageUrl || '/static/default-img.png'"
                mode="aspectFill"
              ></image>
              <view class="recommend-info">
                <view class="recommend-title">{{ item.title }}</view>
                <view class="recommend-meta">{{ item.source }} {{ item.commentCount }}评</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 4. 评论列表+点赞+添加评论 -->
        <view class="comment-section">
          <view class="section-title">热门评论</view>
          <view class="comment-list">
            <view class="comment-item" v-for="(com, idx) in commentList" :key="idx">
              <image 
                class="comment-avatar" 
                :src="com.avatar || '/static/avatar-default.png'"
              ></image>
              <view class="comment-content">
                <view class="comment-header">
                  <view class="comment-username">{{ com.username || '匿名用户' }}</view>
                  <view class="comment-time">{{ com.time || '1小时前' }}</view>
                </view>
                <view class="comment-text">{{ com.content }}</view>
                <view class="comment-action">
                  <image 
                    class="like-icon" 
                    :src="com.isLiked ? '/static/liked.png' : '/static/like.png'"
                    @click="toggleLike(idx)"
                  ></image>
                  <view class="like-count">{{ com.likeCount || 0 }}</view>
                </view>
              </view>
            </view>
          </view>

          <!-- 添加评论 -->
          <view class="comment-input-area">
            <input 
              type="text" 
              class="comment-input" 
              placeholder="来说两句吧..."
              v-model="newComment"
            ></input>
            <button 
              class="send-btn" 
              @click="sendComment"
              :disabled="!newComment.trim()"
            >
              发送
            </button>
          </view>
        </view>
      </scroll-view>

      <!-- 关闭弹窗 -->
      <image class="close-btn" src="/static/close.png" @click="closeDetail"></image>
    </view>

    <!-- 原有新闻列表容器 -->
    <scroll-view
      class="news-list-container"
      scroll-y="true"
      @refresherrefresh="onRefresh"
      refresher-enabled="true"
      refresher-threshold="100"
    >
      <view v-for="(item, index) in filteredNewsList" :key="item.id || index" class="news-item">
        <!-- 纯文本新闻 -->
        <template v-if="item.type === 'text'">
          <view class="text-news" @click="openDetail(item)">
            <view class="news-title">{{ item.title }}</view>
            <view class="news-meta">
              <view class="meta-item" v-if="item.isTop">
                <text class="top-tag">置顶</text>
              </view>
              <view class="meta-item">{{ item.source }}</view>
              <view class="meta-item">{{ item.commentCount }}评</view>
            </view>
          </view>
        </template>

        <!-- 单图新闻 -->
        <template v-else-if="item.type === 'singleImage'">
          <view class="single-img-news" @click="openDetail(item)">
            <image 
              class="news-img" 
              :src="item.imageUrl || '/static/default-img.png'" 
              mode="aspectFill"
            ></image>
            <view class="news-info">
              <view class="news-title">{{ item.title }}</view>
              <view class="news-meta">
                <view class="meta-item">{{ item.source }}</view>
                <view class="meta-item">{{ item.commentCount }}评</view>
              </view>
            </view>
          </view>
        </template>

        <!-- 多图新闻 -->
        <template v-else-if="item.type === 'multiImage'">
          <view class="multi-img-news" @click="openDetail(item)">
            <view class="news-title">{{ item.title }}</view>
            <view class="img-group">
              <image 
                class="multi-img" 
                v-for="(img, imgIndex) in item.imageUrls" 
                :key="imgIndex"
                :src="img || '/static/default-img.png'" 
                mode="aspectFill"
                @click.stop="previewImage(item.imageUrls, imgIndex)"
              ></image>
            </view>
            <view class="news-meta">
              <view class="meta-item">{{ item.source }}</view>
              <view class="meta-item">{{ item.commentCount }}评</view>
            </view>
          </view>
        </template>
      </view>

      <!-- 暂无数据提示 -->
      <view class="no-data" v-if="filteredNewsList.length === 0 && !isRefreshing">
        暂无新闻数据~
      </view>

      <!-- 下拉刷新提示 -->
      <view class="refresh-tip" v-if="isRefreshing">
        刷新中...
      </view>
    </scroll-view>
  </view>
</template>

<script>
import news from "../../data/news.json";
import TopNav from '@/components/TopNav/TopNav.vue';

export default {
  components: { TopNav },
  data() {
    return {
      searchKey: '',
      isRefreshing: false,
      currentTab: 0,
      originNewsList: [],
      filteredNewsList: [],
      // 新增：详情相关数据
      showDetail: false,
      currentNews: {},
      newComment: '',
      commentList: [],
      recommendList: []
    };
  },
  onLoad() {
    this.initNewsData();
  },
  methods: {
    // 原有方法保留不变
    initNewsData() {
      let baseData = news.newList || this.getDefaultNewsList();
      // 补充详情所需字段
      this.originNewsList = baseData.map((item, index) => ({
        ...item,
        id: index + 1,
        author: item.author || '匿名作者',
        authorAvatar: item.authorAvatar || '/static/avatar-default.png',
        content: item.content || this.getMockContent(),
        publishTime: item.publishTime || new Date().toLocaleString(),
        isFollowed: false
      }));
      this.filteredNewsList = [...this.originNewsList];
    },

    getDefaultNewsList() {
      return [
        {
          type: 'text',
          title: '2020，我们温暖的记忆',
          isTop: true,
          source: '新闻联播',
          commentCount: 45,
          author: '央视新闻',
          content: '2020年是不平凡的一年，有感动、有坚守、有成长。那些温暖的瞬间，如同夜空中的星光，照亮了前行的道路。从抗疫一线的逆行者，到平凡生活中的守护者，每个人都在用自己的方式书写着温暖的故事。'
        },
        {
          type: 'text',
          title: '森林大县57年无大火是怎么做到的',
          isTop: true,
          source: '光明网',
          commentCount: 17,
          author: '绿色中国',
          content: '某森林大县坚持生态优先、预防为主，通过建立健全森林防火责任制、加强巡护队伍建设、推广智慧防火技术等多项措施，实现了57年无重大森林火灾的奇迹。当地群众自发参与森林防火，形成了"人人都是护林员"的良好氛围。'
        },
        {
          type: 'singleImage',
          title: '近镜头丨习近平主席韩国之行精彩瞬间',
          imageUrl: '/static/new1.png',
          source: '新华社',
          commentCount: 3558,
          author: '新华网记者',
          content: '习近平主席对韩国进行国事访问期间，与韩国各界人士广泛接触，深化了中韩两国在政治、经济、文化等多个领域的合作共识。访问期间的多个精彩瞬间，展现了两国领导人的深厚友谊和对双边关系发展的殷切期望。'
        },
        {
          type: 'singleImage',
          title: '神舟二十号载人飞船疑遭微小碎片撞击',
          imageUrl: '/static/new2.png',
          source: '新华社',
          commentCount: 5558,
          author: '航天科技报',
          content: '神舟二十号载人飞船在在轨运行期间，疑似遭遇太空微小碎片撞击。据航天工程团队介绍，飞船具备完善的防护机制和故障冗余设计，此次撞击未对飞船安全和航天员生命健康造成影响，飞船各项指标正常。'
        },
        {
          type: 'singleImage',
          title: '美国一飞机坠毁，多人受伤',
          imageUrl: '/static/new3.png',
          source: '极目新闻',
          commentCount: 18,
          author: '国际新闻编辑',
          content: '当地时间某日，美国一架民用航班在起飞后不久发生机械故障，紧急迫降时坠毁，造成多人受伤。事故发生后，当地消防和医疗部门迅速响应，受伤人员已被送往医院救治。事故原因正在进一步调查中。'
        },
        {
          type: 'multiImage',
          title: '加微信群交友群，喜欢就聊，找喜欢的人',
          imageUrls: ['/static/new5.png', '/static/new6.png', '/static/new7.png'],
          source: '广告 我主良缘文化',
          commentCount: 0,
          author: '交友平台',
          content: '想扩大社交圈？想找到志同道合的朋友？加入我们的微信群交友群，这里有各行各业的朋友，喜欢就聊，轻松找到心仪的TA。群内定期组织线下活动，让交友更真实、更高效。'
        },
        {
          type: 'singleImage',
          title: '学习二十届四中全会精神 推进高质量发展',
          imageUrl: '/static/new4.png',
          source: '人民日报',
          commentCount: 888,
          author: '评论员',
          content: '二十届四中全会为我国高质量发展指明了方向。各地各部门积极学习贯彻全会精神，立足自身实际，制定具体落实措施，在科技创新、产业升级、生态保护、民生保障等领域持续发力，推动经济社会发展提质增效。'
        },
        {
          type: 'singleImage',
          title: '随着经济的发展，中国各个城市发展速度越来越快，经济发展迅速，人们幸福快乐',
          imageUrl: '/static/new8.png',
          source: '时代发展',
          commentCount: 3,
          author: '城市观察员',
          content: '近年来，中国经济持续稳定发展，各个城市迎来了前所未有的发展机遇。基础设施不断完善，就业机会持续增加，公共服务水平显著提升，人们的生活质量和幸福感不断增强，呈现出一派欣欣向荣的景象。'
        }
      ];
    },

    getMockContent() {
      const contents = [
        '本文为热点新闻报道，详细介绍了事件的起因、经过和结果。相关部门表示，将持续关注事件进展，及时发布最新消息。欢迎网友在评论区留言讨论。',
        '随着社会的快速发展，此类现象日益受到关注。专家建议，应加强相关制度建设，完善配套措施，促进行业健康可持续发展。',
        '这一成果的取得，离不开全体工作人员的辛勤付出和不懈努力。未来，将继续深耕该领域，力争取得更大的突破和进展。'
      ];
      return contents[Math.floor(Math.random() * contents.length)];
    },

    switchTab(index) {
      this.currentTab = index;
      this.searchKey = '';
      this.filteredNewsList = [...this.originNewsList];
      console.log('切换到分类：', this.currentTab);
    },

    filterNews() {
      if (!this.searchKey.trim()) {
        this.filteredNewsList = [...this.originNewsList];
        return;
      }
      const keyword = this.searchKey.toLowerCase();
      this.filteredNewsList = this.originNewsList.filter(item => 
        item.title.toLowerCase().includes(keyword) || 
        item.source.toLowerCase().includes(keyword)
      );
    },

    onRefresh() {
      this.isRefreshing = true;
      setTimeout(() => {
        const newDataCount = Math.floor(Math.random() * 3) + 1;
        const newData = [];
        for (let i = 0; i < newDataCount; i++) {
          newData.push({
            id: Date.now() + i,
            type: 'singleImage',
            title: `【最新】${new Date().toLocaleString()} 热点新闻${i + 1}`,
            imageUrl: `/static/new${Math.floor(Math.random() * 8) + 1}.png`,
            source: '热点资讯',
            author: '热点小编',
            authorAvatar: '/static/avatar-default.png',
            content: this.getMockContent(),
            publishTime: new Date().toLocaleString(),
            commentCount: Math.floor(Math.random() * 1000),
            isFollowed: false
          });
        }
        this.originNewsList = [...newData, ...this.originNewsList];
        this.filteredNewsList = [...this.originNewsList];
        this.isRefreshing = false;
        uni.stopPullDownRefresh();
        uni.showToast({ title: `更新了${newDataCount}条新闻`, icon: 'none' });
      }, 1000);
    },

    previewImage(imgUrls, currentIndex) {
      uni.previewImage({ current: currentIndex, urls: imgUrls });
    },

    // 新增：打开详情弹窗
    openDetail(newsItem) {
      this.currentNews = { ...newsItem };
      this.showDetail = true;
      // 初始化评论和推荐
      this.initCommentAndRecommend();
    },

    // 新增：关闭详情弹窗
    closeDetail() {
      this.showDetail = false;
      this.newComment = '';
    },

    // 新增：初始化评论和推荐
    initCommentAndRecommend() {
      // 模拟评论数据
      this.commentList = [
        {
          username: '网友872503',
          content: '微笑生活，勇敢面对。',
          likeCount: 7,
          isLiked: false,
          time: '2小时前',
          avatar: '/static/avatar1.png'
        },
        {
          username: '平安379373',
          content: '真看不懂，理解不了。',
          likeCount: 1,
          isLiked: false,
          time: '3小时前',
          avatar: '/static/avatar2.png'
        },
        {
          username: '郊友896903',
          content: '不应该应该如何面对。',
          likeCount: 9,
          isLiked: false,
          time: '5小时前',
          avatar: '/static/avatar3.png'
        }
      ];

      // 精彩推荐（排除当前新闻）
      this.recommendList = this.originNewsList
        .filter(item => item.id !== this.currentNews.id)
        .sort(() => 0.5 - Math.random())
        .slice(0, 3);
    },

    // 新增：切换关注状态
    toggleFollow() {
      this.currentNews.isFollowed = !this.currentNews.isFollowed;
      uni.showToast({
        title: this.currentNews.isFollowed ? '关注成功' : '取消关注',
        icon: 'none'
      });
    },

    // 新增：评论点赞
    toggleLike(idx) {
      const comment = this.commentList[idx];
      comment.isLiked = !comment.isLiked;
      comment.likeCount = comment.isLiked ? comment.likeCount + 1 : comment.likeCount - 1;
    },

    // 新增：发送评论
    sendComment() {
      if (!this.newComment.trim()) return;
      this.commentList.unshift({
        username: '我',
        content: this.newComment,
        likeCount: 0,
        isLiked: false,
        time: '刚刚',
        avatar: '/static/avatar-default.png'
      });
      this.newComment = '';
      uni.showToast({ title: '评论成功', icon: 'none' });
    },

    // 新增：切换推荐新闻
    switchNews(item) {
      this.currentNews = { ...item };
      this.initCommentAndRecommend();
    }
  }
};
</script>

<style scoped>
/* 原有样式保留不变 */
.news-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
}

.tab {
  background-color: #DD524D;
  height: 80rpx;
  position: fixed;
  z-index: 999;
  left: 0;
  right: 0;
  top: var(--status-bar-height);
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.tab_title {
  height: 100%;
  display: flex;
  align-items: center;
}

.scroll_x {
  height: 100%;
  width: 100%;
  white-space: nowrap;
  padding-left: 20rpx;
}

.tab-item {
  display: inline-block;
  color: #FFFFFF;
  font-size: 28rpx;
  margin-right: 30rpx;
  height: 100%;
  line-height: 80rpx;
  padding: 0 5rpx;
  cursor: pointer;
}

scroll-view::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.top-info {
  padding-top: calc(var(--status-bar-height) + 80rpx);
  background-color: #DD524D;
}

.update-notice {
  height: 60rpx;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
}

.three-s {
  color: #FFFFFF;
  font-size: 24rpx;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70rpx;
  padding: 0 20rpx;
}

.weather-info {
  color: #FFFFFF;
  font-size: 24rpx;
  white-space: nowrap;
}

.search-container {
  width: 220rpx;
}

.search_input {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 40rpx;
  padding: 8rpx 20rpx;
  color: #fff;
  font-size: 25rpx;
}

.news-list-container {
  width: 100%;
  min-height: calc(100vh - var(--status-bar-height) - 80rpx - 130rpx);
  padding: 20rpx;
  box-sizing: border-box;
}

.news-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.news-title {
  font-size: 32rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 15rpx;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 24rpx;
  color: #888;
}

.meta-item {
  margin-right: 25rpx;
  margin-bottom: 5rpx;
}

.top-tag {
  background-color: #fff;
  color: #DD524D;
  padding: 2rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  margin-right: 10rpx;
}

.text-news {
  display: flex;
  flex-direction: column;
  padding: 10rpx 0;
  cursor: pointer;
}

.single-img-news {
  display: flex;
  flex-direction: row;
  cursor: pointer;
}

.news-img {
  width: 200rpx;
  height: 160rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
  object-fit: cover;
}

.news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.multi-img-news {
  cursor: pointer;
}

.img-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
  gap: 10rpx;
}

.multi-img {
  width: 31%;
  height: 180rpx;
  border-radius: 12rpx;
  object-fit: cover;
  cursor: pointer;
}

.no-data {
  text-align: center;
  font-size: 28rpx;
  color: #999;
  padding: 100rpx 0;
}

.refresh-tip {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 20rpx 0;
}

/* 新增：详情弹窗样式 */
.detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 1000;
  padding: 20rpx;
  box-sizing: border-box;
}

.detail-scroll {
  width: 100%;
  height: 100%;
}

/* 详情头部样式 */
.detail-header {
  margin-bottom: 30rpx;
}

.detail-title {
  font-size: 36rpx;
  color: #333;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.author-area {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.author-info {
  flex: 1;
}

.author-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 5rpx;
}

.author-meta {
  display: flex;
  font-size: 22rpx;
  color: #888;
}

.source {
  margin-right: 20rpx;
}

.follow-btn {
  background-color: #DD524D;
  color: #fff;
  border: none;
  border-radius: 20rpx;
  padding: 8rpx 20rpx;
  font-size: 22rpx;
  height: 40rpx;
  line-height: 24rpx;
}

.follow-btn.followed {
  background-color: #ccc;
}

/* 详情内容样式 */
.detail-content {
  margin-bottom: 30rpx;
}

.content-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
  margin-bottom: 20rpx;
}

.content-imgs {
  width: 100%;
}

.content-img {
  width: 100%;
  border-radius: 12rpx;
  margin-bottom: 15rpx;
}

/* 精彩推荐样式 */
.recommend-section {
  background-color: #f5f5f5;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eee;
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.recommend-item {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  cursor: pointer;
}

.recommend-img {
  width: 180rpx;
  height: 120rpx;
  object-fit: cover;
}

.recommend-info {
  flex: 1;
  padding: 15rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.recommend-title {
  font-size: 26rpx;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommend-meta {
  font-size: 22rpx;
  color: #888;
}

/* 评论区样式 */
.comment-section {
  background-color: #f5f5f5;
  border-radius: 16rpx;
  padding: 20rpx;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.comment-item {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 15rpx;
}

.comment-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.comment-username {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.comment-time {
  font-size: 22rpx;
  color: #888;
}

.comment-text {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.comment-action {
  display: flex;
  align-items: center;
}

.like-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  cursor: pointer;
}

.like-count {
  font-size: 22rpx;
  color: #888;
}

/* 评论输入样式 */
.comment-input-area {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 10rpx;
}

.comment-input {
  flex: 1;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  background-color: transparent;
}

.send-btn {
  background-color: #DD524D;
  color: #fff;
  border: none;
  border-radius: 20rpx;
  padding: 0 25rpx;
  font-size: 26rpx;
  height: 50rpx;
  line-height: 50rpx;
}

.send-btn:disabled {
  background-color: #ccc;
}

/* 关闭按钮样式 */
.close-btn {
  position: fixed;
  top: 30rpx;
  right: 30rpx;
  width: 50rpx;
  height: 50rpx;
  z-index: 1001;
}
</style>